import React from "react";
import CodeBlock from "../../../component/CodeBlock";
import { code } from "./codeData";

function RefTest() {
    const refTest = React.useRef<HTMLDivElement>(null);
    return (<div className="tab-pane" ref={refTest}>
        <h1>Ref</h1>
        <p>Ref是React中一种特殊的数据结构，它允许我们直接访问DOM元素或保存可变值而不触发重新渲染。</p>

        <h3>使用useRef创建Ref</h3>
        <p>使用useRef Hook可以创建一个ref对象：</p>
        <button className='mainButton' onClick={() => console.log(refTest.current)}>点击测试ref获取DOM</button>
        <CodeBlock code={code.ref1}></CodeBlock>

        <h3>访问DOM元素</h3>
        <p>最常见的ref用途是直接访问DOM元素：</p>
        <CodeBlock code={code.ref2}></CodeBlock>

        <h3>保存可变值</h3>
        <p>Ref也可以用来保存那些不需要触发重新渲染的可变值：</p>
        <CodeBlock code={code.ref3}></CodeBlock>
        <h3>回调Ref</h3>
        <p>除了使用useRef，你还可以使用回调函数的方式设置ref：</p>
        <CodeBlock code={code.ref5}></CodeBlock>

        <h3>forwardRef</h3>
        <p>当需要将ref传递给子组件时，可以使用forwardRef：</p>
        <CodeBlock code={code.ref5}></CodeBlock>

        <h3>useImperativeHandle</h3>
        <p>结合forwardRef使用，可以自定义暴露给父组件的ref值：</p>
        <CodeBlock code={code.ref6}></CodeBlock>
        <h3>什么时候使用Ref</h3>
        <p>Ref适用于以下场景：</p>
        <ul>
            <li>管理焦点、文本选择或媒体播放</li>
            <li>触发强制动画</li>
            <li>集成第三方DOM库</li>
            <li>保存不需要触发重新渲染的可变值</li>
        </ul>
        <p>避免在以下情况使用ref：</p>
        <ul>
            <li>普通数据应该使用state</li>
            <li>不要过度使用ref，应该优先声明式编程</li>
        </ul>
    </div>);
}

export default RefTest;